<template>
  <div>
    <Breadcrumb :style="{margin: '24px 20px'}">
      <BreadcrumbItem>用户测量数据</BreadcrumbItem>
      <BreadcrumbItem>三维人体模型展示</BreadcrumbItem>
    </Breadcrumb>
    <Card :style="{padding: '24px', minHeight: '680px', background: '#fff', marginLeft: '20px', minWidth: '1400px'}">
        <div class="info-container">
          <div class="tips">展示模型对应的测量尺寸为：</div>
          <div class="btn" @click='getAndLoad'>点击加载人体模型</div>
        </div>
        <Table border :data="tableData">
          <TableColumn
              prop="type"
              label="尺寸类型">
            </TableColumn>
            <TableColumn
              prop="value"
              label="测量值">
            </TableColumn>
            <TableColumn
              prop="unit"
              label="单位">
            </TableColumn>
            <TableColumn
              prop="date"
              label="更新时间">
            </TableColumn>
          </Table>
        <div class="model-container" v-if="showModel">
          <div id="model-canvas"></div>
        </div>
    </Card>
  </div>
</template>
<script>
import * as THREE from 'three'
import OrbitControls from 'three-orbitcontrols'
import { OBJLoader } from 'three-obj-mtl-loader'
// import * as OBJLoader from '../../utils/OBJLoader'
export default {
  name: 'ModelShow',
  data() {
    return {
      showModel: false,
      modelFile: '',
      tableData: []
    }
  },
  mounted() {
    this.getLastestData()
  },
  methods: {
    async getAndLoad() {
      this.showModel = true
      await this.getModel()
    },
    async getLastestData() {
      const res = await this.$http.get('/measure/getLastestRes', {
        params: {
          username: 'ljp'
        }
      })
      if (res.code === 200) {
        const newTableData = []
        const measureData = res.data
        const types = res.key
        const dates = res.date
        types.forEach((item, index) => {
          newTableData.push({
            type: item,
            value: measureData[index],
            unit: 'mm',
            date: dates[index]
          })
        })
        this.tableData = newTableData
      }
    },
    async getModel() {
      // 网络请求会报错，报错的数据即是文件内容
      await this.$http.get('/measure/getmodel', {
        params: {
          username: 'ljp'
        }
      })
        .then(err => {
          // console.log(err)
          this.modelFile = err
        })
      this.loadModel()
    },
    loadModel() {
      var container = document.querySelector('#model-canvas')
      /**
      * 创建场景对象Scene
      */
      var scene = new THREE.Scene()
      /**
       * 创建网格模型
       */
      // console.log('model', this.modelFile)
      const obj = new OBJLoader().parse(this.modelFile)
      // 模型放大一百倍
      obj.scale.set(100, 100, 100)
      // console.log(obj)
      scene.add(obj)
      // new OBJLoader().load('model/hello_smpl.obj', obj => {
      //   var material = new THREE.MeshLambertMaterial({ color: 0x5C3A21 })
      //   obj.children.forEach(function (child) {
      //     child.material = material
      //     child.geometry.computeFaceNormals()
      //     child.geometry.computeVertexNormals()
      //   })
      //   // 模型放大一百倍
      //   obj.scale.set(100, 100, 100)
      //   // console.log(obj)
      //   scene.add(obj)
      // })

      /**
       * 光源设置
       */
      // 点光源
      var point = new THREE.PointLight(0xcccccc)
      point.position.set(-100, 0, 200) // 点光源位置
      scene.add(point) // 点光源添加到场景中
      // 环境光
      var ambient = new THREE.AmbientLight(0xcccccc)
      scene.add(ambient)
      /**
       * 相机设置
       */
      var width = 500 // 窗口宽度
      var height = 500 // 窗口高度
      var k = width / height // 窗口宽高比
      var s = 150 // 三维场景显示范围控制系数，系数越大，显示的范围越大
      // 创建相机对象
      // var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
      var camera = new THREE.PerspectiveCamera(45, width / height, 1, 3000)
      // camera.position.set(200, 300, -300) // 设置相机位置
      camera.position.set(0, -300, 0) // 设置相机位置
      camera.lookAt(scene.position) // 设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer()
      renderer.setSize(width, height) // 设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1) // 设置背景颜色
      container.appendChild(renderer.domElement) // body元素中插入canvas对象

      // 渲染函数
      function render() {
        renderer.render(scene, camera) // 执行渲染操作
        requestAnimationFrame(render)// 请求再次执行渲染函数render，渲染下一帧
      }
      render()
      var controls = OrbitControls(camera, renderer.domElement)// 创建控件对象
      // console.log(controls)
      controls.addEventListener('change', render)
    }
  }
}
</script>
<style scoped lang="less">
.tips {
  height: 30px;
  line-height: 30px;
}
.model-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 500px;
}
.btn {
    width: 200px;
    height: 50px;
    background-color: pink;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    margin-left: 800px;
  }
.info-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>
